<script setup lang="ts">
import {useTransition} from "@vueuse/core";
import { onMounted, ref, watch} from "vue";

const source = ref(0)
const outputValue = useTransition(source, {
    duration: 1500,
    transition: [0.75, 0, 0.25, 1]
})
const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    title: {
        type: String,
        default: ''
    },
    precision: {
        type: Number,
        default: 0
    }
})

watch(() => props.value, (newValue) => {
    source.value = newValue
}, {deep: true})



</script>

<template>
    <el-statistic class="statistic" :title="title"
                  :precision="precision"
                  :value="outputValue" />
</template>

<style scoped lang="css">
:deep(.el-statistic__number) {
    font-size: 30px;
}
</style>